Paramiliar Design Studios Redefining Innovation and Excellence Design Services, website, build, cost effective, World Wide Web Consortium, browser compatability, website renovation

CSS Basics part 1

Posted By : mattyb 28th Mar 2007

There are only three parts to Cascade Style Sheets (CSS), and once we understand what they are and how to use them, CSS becomes very easy and exciting to use. One of the best parts of CSS is that you can create an external Cascade Style Sheet, which you can use for all web pages on your website. You can also have one CSS for all of your articles and a different one for all of your press releases. Making one change in your CSS, you are able to effect changes to a few web pages or to hundreds of web pages without ever touching any of the different web pages themselves.

Below I am going to break out each one of the parts of CSS and explain them in non-techie terms:

1. Selector
2. Property
3. Value

This is what these three parts will look like when they are all put to together:

Code

1.	selector { property: value }

The first part is the selector. In techie terms, a selector is the (x)HTML element that you want to style. Now what does this really mean to the person who doesn’t know about (x)html code and really doesn’t want to learn it, but does want to make changes to their own websites. Absolutely nothing, right? It just went over your head and now you are at a loss (oh how well I know that feeling!). Well, let me show you what some of the most common selectors are, and I know that you will begin to feel more comfortable with selectors.

The first selector that you come across in all web pages is the body, next might be h1, or the p. In (x)html the code is going to look like this:

< body> your web page content goes here< /body>: or,
< h1> Your headline text goes here< /h1> ; or,
< p> your paragraph text goes here< /p> .

For the first example, let us start with the body. Here is the main thing that you will likely do with this simple but important piece of code. Let us say you want the main background colour of your website to blue or #0000ff (which is the hex code for blue). It will look like this:

Code

1.	body {background-color: #0000ff}

OK, what does all that mean? It is saying that the “background-color”, which is the property, is going to be blue, which is the value of that property. In simple terms, it means the main background colour of your website is going to blue. It is easy to change the background colour of your website now just by changing the hex code (#0000ff) to a different colour, say red, which would look like this: #ff0000.

Now let’s look at the selector h1:

Code

1.
2.
3.
4.
5.
6.
7.
8.

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22pt;
font-weight: bold;
text-align: center;
color: #000000;
background-color: #ffffff;
}

Here we are defining what h1, or the text inside of our header 1 tags, is going to look like. The first line in the property is the font-family, and the value is Verdana, Arial, Helvetica, and sans serif. Therefore, in plain English, what we are saying is the font that we want to use for all of our h1 headers is going to be Verdana, Arial, Helvetica, or sans serif.

You might be asking if we want the main font to be Verdana, why are we also using Arial, Helvetica, and sans serif as fonts? The reason for this is not all computers are going to have Verdana font loaded on them. If they do not, then the default font becomes Arial. The same thing holds true for the Arial font, which then defaults to Helvetica and, finally, to what is called a system font or screen font that all computers have on them, which is sans serif.

Now for the next line, which is “font-size: 22pt”. The property is font-size and the value of that is 22pt. 22pt is the easiest to use because we all know about 10 pitch, 12 pitch, 14 pitch fonts when we are using our word processors. There are several other different ways to express the size of the font, one of which is small, medium, and large, and is much more complex than just entering the pitch size.

Next, we come to the font-weight, which is a real easy way to bold all of the text in your header without using any other code to do it. Following along with what we already know, font-weight is going to be the property and bold is going to be the value of the font weight. If you choose not to bold all the text, all you need to do is change the word “bold” to “normal” and you are all done.

The text-align is just that: by changing the word “center” to “left”, you can align your text to the left margin instead of aligning it all to the centre. I am sure that you are beginning to get the hang of this by now, but just follow through, “text-align” is the property and “center” is the value.

The colour of your font or text is going to be the hex code colour #000000, or black. If you want to change the colour of the font, find the hex code for the colour that you want it to be and replace #000000 with it.

The last one here is the background colour, which is behind the header text. This background colour is different from the body background colour in that this colour is going to be directly related just to the text in between the header tags or the h1 tags. In our example, “background-color” is the property and “#ffffff” is the value. You can change the background colour to any colour you like just by replacing the hex code #ffffff, which is white, with the hex colour code of your choosing.

In our next article, we begin with the paragraph tags and show just how easy it is to get rid of a ton out dated code.